<#include "../common/layoutWithOutDocType.ftl"/>
<@layoutWithOutDocType>
<table width="100%">
<tr>
<td width="40%">
<div class="well">
	<span class="label label-success">定距定价</span>
	<br>
	<form id="form1" class="well form-horizontal" action="/order/approval"  method="post">
		<input type="hidden" name="order.member_id" value="${order.member_id}"/>
		<input type="hidden" name="order.id" value="${order.id}"/>
		<input type="hidden" name="order.temp_driver" value="${order.temp_driver}"/>
       <div class="control-group">
        <label class="control-label" for="focusedInput">订单号：</label>
        <div class="controls" >
          ${order.id!""}
        </div>
	 </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">客户姓名：</label>
        <div class="controls" >
          ${order.real_name!""}
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">客户手机号码：</label>
        <div class="controls" >
          ${order.cell_phone!""}
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">客户车牌号码：</label>
        <div class="controls" >
          ${order.plage_number!""}
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">客户所在区域：</label>
        <div class="controls" >
          <select id="userarea" name="order.userarea">
            <option value="所有区域" <#if order.userarea=='所有区域'>selected</#if>>所有区域</option>
            <option value="黄浦区" <#if order.userarea=='黄浦区'>selected</#if>>黄浦区</option>
            <option value="徐汇区" <#if order.userarea=='徐汇区'>selected</#if>>徐汇区</option>
            <option value="长宁区" <#if order.userarea=='长宁区'>selected</#if>>长宁区</option>
            <option value="静安区" <#if order.userarea=='静安区'>selected</#if>>静安区</option>
            <option value="普陀区" <#if order.userarea=='普陀区'>selected</#if>>普陀区</option>
            <option value="闸北区" <#if order.userarea=='闸北区'>selected</#if>>闸北区</option>
            <option value="虹口区" <#if order.userarea=='虹口区'>selected</#if>>虹口区</option>
            <option value="杨浦区" <#if order.userarea=='杨浦区'>selected</#if>>杨浦区</option>
            <option value="闵行区" <#if order.userarea=='闵行区'>selected</#if>>闵行区</option>
            <option value="宝山区" <#if order.userarea=='宝山区'>selected</#if>>宝山区</option>
            <option value="嘉定区" <#if order.userarea=='嘉定区'>selected</#if>>嘉定区</option>
            <option value="浦东新区" <#if order.userarea=='浦东新区'>selected</#if>>浦东新区</option>
            <option value="金山区" <#if order.userarea=='金山区'>selected</#if>>金山区</option>
            <option value="松江区" <#if order.userarea=='松江区'>selected</#if>>松江区</option>
            <option value="青浦区" <#if order.userarea=='青浦区'>selected</#if>>青浦区</option>
            <option value="奉贤区" <#if order.userarea=='奉贤区'>selected</#if>>奉贤区</option>
            <option value="崇明县" <#if order.userarea=='崇明县'>selected</#if>>崇明县</option>
          </select>
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">起点：</label>
        <div class="controls" >
          <input class="input-medium focused" name="order.startpoint" id="startpoint" type="text"  style="height: 26"  value="${order.startpoint}">
	  <br>
          经度:<input name="order.startpoint_longitude" id="startpoint_longitude" type="text" readonly  length="10"><br>
          纬度:<input name="order.startpoint_latitude" id="startpoint_latitude"  type="text" readonly  length="10">
          <a href="#"  id="beginChooser" class="btn btn-primary" onclick="markBegin()">选 择</a>
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">终点：</label>
        <div class="controls" >
          <input class="input-medium focused" name="order.endpoint" id="endpoint" type="text"  style="height: 26" value="${order.endpoint}" >
	  <br>
           经度:<input name="order.endpoint_longitude" id="endpoint_longitude"   type="text" readonly length="10"><br>
          纬度:<input name="order.endpoint_latitude" id="endpoint_latitude"  type="text" readonly length="10">
          <a href="#"  id="endChooser" class="btn btn-primary" onclick="markEnd()">选 择</a>
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">里程：</label>
        <div class="controls" >
          <input class="input-medium focused" name="order.kilometre" id="kilometre" type="text"  style="height: 26"  >
          <label class="control-label" id="kilometre_adv"></label>
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">总金额：</label>
        <div class="controls" >
          <input class="input-medium focused" name="order.totalmoney" id="totalmoney" type="text"  style="height: 26"  >
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">支付方式：</label>
        <div class="controls" >
           <select id="pay_type" name="order.pay_type">
            <option value="0" selected>现金</option>
            <option value="1">企业支付</option>
            <option value="2">VIP支付</option>
            <option value="3">免费客户</option>
          </select>
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">订单类型：</label>
        <div class="controls" >
           <select id="order_type" name="order.order_type">
            <option value="0" selected>普通</option>
            <option value="1" >企业订单</option>
            <option value="2" >酒店订单</option>
            <option value="3" >KTV订单</option>
            <option value="4" >VIP订单</option>
          </select>

        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">地号：</label>
        <div class="controls" >
          <input class="input-medium focused" name="order.area_num" id="area_num" type="text"  style="height: 26"  >
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">详情：</label>
        <div class="controls" >
          <input class="input-medium focused" name="order.detail" id="detail" type="text"  style="height: 26"  >
        </div>
      </div>
       <div class="control-group">
        <label class="control-label" for="focusedInput">备注：</label>
        <div class="controls" >
          <input class="input-medium focused" name="order.remark" id="remark" type="text"  style="height: 26" value="${order.remark}">
        </div>
      </div>
      
      <div class="form-actions">
        <button type="submit" class="btn btn-primary" onsubmit="save()">确 定</button>
        <button type="reset" class="btn">重 置</button>
        <button type="button" class="btn btn-info" onclick="javascript:history.back();">返回</button>
      </div>
  </form>
  </div>
</td>
<td width="60%">
  <div class="well" style="height:800px"> 
  		<!--百度地图容器-->
  		<div>
  		<input class="input-medium focused" id="searchValue" type="text"  style="height: 26">
  		<button type="button" class="btn btn-primary" onclick="search()">搜 索</button>
  		<button type="button" class="btn btn-primary" onclick="dis();" >测 距</button>
  	</div>
  	<div id="container"></div>
  	<div id="results"></div>
<style type="text/css"> 
#container{height:100%}
</style> 
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.2&services=true"></script>
<script type="text/javascript" src="/js/baiduMap/MarkerTool.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<script>
 var beginPoint ;
 var endPoint ;
	
	 
	//创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("container");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.182258,31.540816);//定义一个中心点坐标 
        map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
	    //向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
	    //向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
	    //向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
    }
    
    
    
    initMap();
    
    
    function markBegin(){
	    var mkrTool = new BMapLib.MarkerTool(map,{followText: "点击地图添加标注"});
	    mkrTool.addEventListener("markend", function(evt){ 
		    beginPoint = evt.marker;
		    beginPoint.enableDragging(true); // 设置标注可拖拽
		    $("#startpoint_longitude").val(beginPoint.getPosition().lng);
			 $("#startpoint_latitude").val(beginPoint.getPosition().lat);
		    beginPoint.addEventListener("dragend" , function(){
			     $("#startpoint_longitude").val(beginPoint.getPosition().lng);
			 	 $("#startpoint_latitude").val(beginPoint.getPosition().lat);
		    	 var gc = new BMap.Geocoder(); 
			     var pt = beginPoint.point; 
			     gc.getLocation(pt, function(rs){
				   // var addComp = rs.addressComponents;
				   // $("#startpoint").val(addComp.district + addComp.street + addComp.streetNumber);
				    route();
				});  
		    })
		    //TODO
		    var gc = new BMap.Geocoder(); 
		     var pt = beginPoint.point; 
		     gc.getLocation(pt, function(rs){
			   // var addComp = rs.addressComponents;
			   // $("#startpoint").val(addComp.district + addComp.street + addComp.streetNumber);
			});  
		});
	     mkrTool.open(); //打开工具 
	     var icon= new BMap.Icon('/img/marker/start.png', new BMap.Size(38, 33), {
    			imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  			}
			);
		 mkrTool.setIcon(icon);
		 $("#beginChooser").attr("disabled" , true);
		 
	 }
	 
	 
	 function markEnd(){
	    var mkrTool = new BMapLib.MarkerTool(map,{followText: "点击地图添加标注"});
	    mkrTool.addEventListener("markend", function(evt){ 
		    endPoint = evt.marker;
		    endPoint.enableDragging(true); // 设置标注可拖拽
		    $("#endpoint_longitude").val(endPoint.getPosition().lng);
			$("#endpoint_latitude").val(endPoint.getPosition().lat);
		    endPoint.addEventListener("dragend" , function(){
			     $("#endpoint_longitude").val(endPoint.getPosition().lng);
				 $("#endpoint_latitude").val(endPoint.getPosition().lat);
		    	 var gc = new BMap.Geocoder(); 
			     var pt = endPoint.point; 
			     gc.getLocation(pt, function(rs){
				  //  var addComp = rs.addressComponents;
				  //  $("#endpoint").val(addComp.district + addComp.street + addComp.streetNumber);
				    route();
				});  
		    })
		    //alert(marker.getPosition().lng + " , " + marker.getPosition().lat);
		    var gc = new BMap.Geocoder(); 
		     var pt = endPoint.point; 
		     gc.getLocation(pt, function(rs){
			  //  var addComp = rs.addressComponents;
			  //  $("#endpoint").val(addComp.district + addComp.street + addComp.streetNumber);
			    route();
			});  
		});
	     mkrTool.open(); //打开工具 
	     var icon= new BMap.Icon('/img/marker/end.png', new BMap.Size(38, 33), {
    			imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  			}
			);
		 mkrTool.setIcon(icon);
		 $("#endChooser").attr("disabled" , true);
	 }
	 
    
	 
	 function route(){
	 	var output = "";
		var searchComplete = function (results){
		    if (transit.getStatus() != BMAP_STATUS_SUCCESS){
		        return ;
		    }
		   var plan = results.getPlan(0);
		   $("#kilometre_adv").text(plan.getDistance(true));
		}
		var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map},
		    onSearchComplete: searchComplete,
		    onPolylinesSet: function(){        
		        setTimeout(function(){},"1000");
		    }});
		if(beginPoint && endPoint){
			transit.search(beginPoint.getPosition(), endPoint.getPosition());
		}
	 }
	 
	  function search(){
	 	var local = new BMap.LocalSearch(map, {
		  renderOptions: {map: map, panel: "results"}
		});
		
		local.search($("#searchValue").val());
			 	
	 }
	 function dis(){
	 	  var myDis = new BMapLib.DistanceTool(map);
	 	  myDis.open();
	 }
</script>
  </div>
  </div>
</td>
</tr>
</table>
 <script>
	$(function() { 
     $("#form1").validity(function() {
         $("#userarea").require();
         $("#startpoint").require();
         $("#endpoint").require();
         $("#area_num").require();
         $("#kilometre").require().match("number");
         $("#totalmoney").require().match("number");
	  $("#startpoint_longitude").require();
	 $("#startpoint_latitude").require();
	 $("#endpoint_longitude").require();
	 $("#endpoint_latitude").require();
     });
     
 }); 
</script>
</@layoutWithOutDocType>